*{
    padding: 0;
    margin: 0;
}
/* 页面主容器样式 */
body {
    width:100%;/* 宽度 */
    margin: 0 auto; /* 边界auto为自动，这里用到了缩写形式意思为上下为0，左右自动 */
    background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
    background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
    background-attachment: fixed;
    overflow: hidden;
    color: #FFFFFF;
}

@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  bottom: 0;
  perspective-origin: 50% 100%;
  left: 50%;
  animation: rotate 90s infinite linear;
}

.star {
  width: 2px;
  height: 2px;
  background: #F7F7B6;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0 -300px;
  transform: translate3d(0, 0, -300px);
  backface-visibility: hidden;
}

#bottom{
  position:fixed; 
  left:0px; 
  bottom:0px;  
  width:100vw; 
  height: 3vh;
  z-index:1;
}

a {
  text-decoration: none;
}

.main {
  margin-top: 5vh;
  padding-bottom:5vh;
  height:52vh;
  overflow:auto;
  overflow-x:hidden;
  overflow-y: auto;
  text-align: center;
}

.main .box {
  overflow: hidden;
  margin: 10px auto;
  padding-bottom: 10px;
  text-align: left;
}

.main .box .item {
  width: 22.5%;
  border: 1px solid #e4ecf3;
  box-shadow: 1px 2px 3px #f2f6f8;
  border-radius: 6px;
  color: #FFFFFF;
  background: linear-gradient(to bottom right, #e66465, #9198e5);
  padding: 10px;
  min-width: 155px;
  margin: 20px 0 0 2.1%;
  float: left;
  overflow: hidden;
  transition: all .3s;
}
.main .box .item:hover {
  transform: translateY(-5px);
  background: -webkit-linear-gradient(to bottom right, #3a6186, #9198e5); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom right, #3a6186, #9198e5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #E8E8E8;
}

.main .box .item .logo {
  height: 40px;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 .1rem;
}

.main .box .item .logo img {
  width: 40px;
  height: 40px;
}

.main .box .item .logo strong {
  font-size: 16px;
  margin-left: 9px;
}

.main .box .item .desc {
  color: #ffffff;
  font-size: 12px;
  padding-top: 10px;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
  width: 0px;
  height: 0px;
}

a i:hover {
  color: #FFFFFF;
}

.main2 {
  height:52vh;
  margin-top: 5vh;
  margin-bottom:15vh;
  overflow:auto;
  overflow-x:hidden;
  overflow-y: auto;
  text-align: center;
}

.main2 .box2 {
  overflow: hidden;
  margin: auto auto;
  padding-bottom: 10px;
  text-align: left;
}

.sub-category {
  padding-left: 3vw;
  font-size: 18px;
  color: #FFFFFF;
}

#zwhx {
  margin-top: 2vh;
  margin-bottom: 2vh;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.38);
}

.main2 .box2 .item2 {
  width: 22.5%;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 2px #f2f6f8;
  border-radius: 3px;
  color: black;
  background-color: rgba(255, 255, 255, 0.38);
  min-width: 165px;
  padding: 10px;
  margin: 15px 0 0 2.1%;
  float: left;
  transition: all .3s;
  /* 文本超出宽度时显示省略号 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 3px 3px; /* 左上角、右上角、右下角、左下角（顺时针顺序 )*/
}
.main2 .box2 .item2:hover {
  color: #C00;
  background-color: rgba(255, 255, 255, 0.92);
  border: 1px solid #828282;
  transform: scale(1.08);
}

img:hover{
  transition: .5s transform;
  transform: scale(1.2);
}

.main2 .box2 .item2 img {
  width: 24px;
  height: 24px;
}

.main2 .box2 .item2 strong {
  font-size: 16px;
  margin-left: 12px;
}